<template>
  <AppWrapper content-class="items-center justify-center">
    <main class="mb-[80px]">
      <div class="hd mb-[50px]">
        <img
          class="h-[50px] mx-auto pointer-events-none select-none"
          src="~@/assets/title2.png"
          alt=""
        />
      </div>
      <form
        class="search w-[700px] mx-auto flex h-[65px] rounded-full overflow-hidden"
        @submit.stop="onSubmit"
      >
        <input
          type="text"
          class="flex-auto px-8 outline-0 text-xl"
          placeholder="输入搜索内容"
        />
        <button
          type="submit"
          class="flex items-center bg-[#8A6E49] px-[40px] text-white text-[20px] select-pointer"
        >
          <img src="~@/assets/search.png" alt="" class="w-[26px] mr-3" />
          搜索
        </button>
      </form>
    </main>
  </AppWrapper>
</template>

<script>
export default {
  methods: {
    onSubmit() {
      this.$router.replace({ name: "Home", params: { word: "1" } });
    },
  },
};
</script>
